<template>
  <view class="favorites-container">
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
      </view>
      <view class="nav-title">
        <text>我的收藏</text>
      </view>
      <view class="nav-right"></view>
    </view>
    
    <!-- 标签页 -->
    <view class="tabs-container">
      <uni-segmented-control 
        :current="currentTab" 
        :values="tabs" 
        @clickItem="onTabClick" 
        style-type="text" 
        active-color="#007AFF">
      </uni-segmented-control>
      
      <!-- 健康资讯 -->
      <view v-show="currentTab === 0" class="tab-content">
        <view class="empty-state" v-if="healthInfoList.length === 0">
          <image src="/static/images/empty-favorites.png" mode="aspectFit"></image>
          <text>暂无收藏的健康资讯</text>
        </view>
        
        <view class="favorites-list" v-else>
          <view class="favorite-item" v-for="(item, index) in healthInfoList" :key="index" @click="goToHealthInfoDetail(item)">
            <image :src="item.coverImage" mode="aspectFill"></image>
            <view class="item-info">
              <text class="item-title">{{ item.title }}</text>
              <text class="item-desc">{{ item.content }}</text>
              <text class="item-desc">{{ item.publishTime }}</text>
            </view>
            <view class="item-action">
              <uni-icons type="right" size="16" color="#999"></uni-icons>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 健康视频 -->
      <view v-show="currentTab === 1" class="tab-content">
        <view class="empty-state" v-if="healthVideoList.length === 0">
          <image src="/static/images/empty-favorites.png" mode="aspectFit"></image>
          <text>暂无收藏的健康视频</text>
        </view>
        
        <view class="favorites-list" v-else>
          <view class="favorite-item" v-for="(item, index) in healthVideoList" :key="index" @click="goToHealthVideoDetail(item)">
            <image :src="item.image" mode="aspectFill"></image>
            <view class="item-info">
              <text class="item-title">{{ item.title }}</text>
              <text class="item-desc">{{ item.description }}</text>
            </view>
            <view class="item-action">
              <uni-icons type="right" size="16" color="#999"></uni-icons>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 病友圈 -->
      <view v-show="currentTab === 2" class="tab-content">
        <view class="empty-state" v-if="communityList.length === 0">
          <image src="/static/images/empty-favorites.png" mode="aspectFit"></image>
          <text>暂无收藏的病友圈内容</text>
        </view>
        
        <view class="favorites-list" v-else>
          <view class="favorite-item" v-for="(item, index) in communityList" :key="index" @click="goToCommunityDetail(item)">
            <view class="item-info">
              <text class="item-title">{{ item.title }}</text>
              <text class="item-desc">{{ item.content }}</text>
              <text class="item-desc">{{ item.publishTime }}</text>
              <text class="item-desc">收藏数量{{ item.collectCount }}</text>
              <text class="item-desc">建议数量{{ item.adviceCount}}</text>
            </view>
            <view class="item-action">
              <uni-icons type="right" size="16" color="#999"></uni-icons>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getHealthInfoFavorites, getHealthVideoFavorites, getCommunityFavorites } from '@/api/favorites'

export default {
  data() {
    return {
      currentTab: 0,
      tabs: ['健康资讯', '健康视频', '病友圈'],
      healthInfoList: [],
      healthVideoList: [],
      communityList: []
    }
  },
  mounted() {
    // 页面加载时获取第一个标签页的数据
    this.fetchFavoritesData(1)
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    onTabClick(e) {
      if (this.currentTab !== e.currentIndex) {
        this.currentTab = e.currentIndex
        // 根据标签页类型获取数据 (1: 健康资讯, 2: 健康视频, 3: 病友圈)
        this.fetchFavoritesData(e.currentIndex + 1)
      }
    },
    // 获取健康资讯收藏数据
    async getHealthInfoData() {
      try {
        const res = await getHealthInfoFavorites({category: 1})
        if (res.code === 200) {
          this.healthInfoList = res.data
        }
      } catch (error) {
        console.error('获取健康资讯收藏数据失败:', error)
      }
    },

    // 获取健康视频收藏数据
    async getHealthVideoData() {
      try {
        // const res = await getHealthVideoFavorites({category: 2})
        // if (res.code === 200) {
        //   this.healthVideoList = res.data
        // }
      } catch (error) {
        console.error('获取健康视频收藏数据失败:', error)
      }
    },

    // 获取病友圈收藏数据
    async getCommunityData() {
      try {
        const res = await getCommunityFavorites({category: 3})
        if (res.code === 200) {
          this.communityList = res.data
        }
      } catch (error) {
        console.error('获取病友圈收藏数据失败:', error)
      }
    },

    // 根据类型获取收藏数据
    fetchFavoritesData(type) {
      switch (type) {
        case 1:
          this.getHealthInfoData()
          break
        case 2:
          this.getHealthVideoData()
          break
        case 3:
          this.getCommunityData()
          break
      }
    },
    goToHealthInfoDetail(item) {
      // 跳转到健康资讯详情页
      console.log('查看健康资讯详情:', item)
    },
    goToHealthVideoDetail(item) {
      // 跳转到健康视频详情页
      console.log('查看健康视频详情:', item)
    },
    goToCommunityDetail(item) {
      // 跳转到病友圈详情页
      console.log('查看病友圈详情:', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.favorites-container {
  min-height: 100vh;
  background-color: #fff;
  
  .nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    
    .nav-left, .nav-right {
      width: 40px;
    }
    
    .nav-title {
      flex: 1;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
    }
  }
  
  .tabs-container {
    padding: 0 15px;
    background-color: #fff;
    
    /* 标签页内容区域 */
    .tab-content {
      padding: 15px 0;
      
      .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 50px 0;
        
        image {
          width: 100px;
          height: 100px;
          margin-bottom: 20px;
        }
        
        text {
          font-size: 16px;
          color: #999;
        }
      }
      
      .favorites-list {
        .favorite-item {
          display: flex;
          align-items: center;
          padding: 15px;
          background-color: #fff;
          border-radius: 8px;
          margin-bottom: 10px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
          
          image {
            width: 60px;
            height: 60px;
            border-radius: 6px;
            margin-right: 15px;
          }
          
          .item-info {
            flex: 1;
            
            .item-title {
              font-size: 16px;
              font-weight: bold;
              margin-bottom: 5px;
              display: block;
            }
            
            .item-desc {
              font-size: 14px;
              color: #666;
              display: block;
            }
          }
          
          .item-action {
            width: 30px;
            text-align: right;
          }
        }
      }
    }
  }
}
</style>